<template>
  <div>
    <!-- 公共属性 -->
    <el-form label-width="80px" :model="activeElement" size="mini" class="kr-form">

      <el-row :hidden="hiddenValue">
        <el-col :span="24">
          <el-form-item label="值">
            <el-input
                v-model="activeElement.value"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="宽度">
            <el-input-number
                v-model="rect.width"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度">
            <el-input-number
                v-model="rect.height"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="横坐标">
            <el-input-number
                v-model="rect.x"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纵坐标">
            <el-input-number
                v-model="rect.y"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-col :span="12">
          <el-form-item label="字号">
            <el-input-number
                v-model="font.size"
                controls-position="right"
                :min="0"
                class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加粗">
            <el-switch
                v-model="font.bold"
                :active-value="true"
                :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-form-item label="字体颜色">
          <el-col :span="24">
            <el-input v-model="font.color" placeholder="请输入颜色编码, 如: #000000" class="min-input"/>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-form-item label="上边框">
          <el-col :span="12">
            <el-input-number v-model="topLine.lineWidth" placeholder="上边框宽度(mm)" controls-position="right" :min="0" class="min-input"/>
            <span class="unit-text">(mm)</span>
          </el-col>
          <el-col :span="12">
            <el-input v-model="topLine.color" placeholder="格式: #000000" class="min-input"></el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-form-item label="右边框">
          <el-col :span="12">
            <el-input-number v-model="rightLine.lineWidth" placeholder="右边框宽度(mm)" controls-position="right" :min="0" class="min-input"/>
            <span class="unit-text">(mm)</span>
          </el-col>
          <el-col :span="12">
            <el-input v-model="rightLine.color" placeholder="格式: #000000" class="min-input"></el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-form-item label="下边框">
          <el-col :span="12">
            <el-input-number v-model="bottomLine.lineWidth" placeholder="下边框宽度(mm)" controls-position="right" :min="0" class="min-input"/>
            <span class="unit-text">(mm)</span>
          </el-col>
          <el-col :span="12">
            <el-input v-model="bottomLine.color" placeholder="格式: #000000" class="min-input"></el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row :hidden="viewType !== 'YL_TYPE_TEXT'">
        <el-form-item label="左边框">
          <el-col :span="12">
            <el-input-number v-model="leftLine.lineWidth" placeholder="左边框宽度(mm)" controls-position="right" :min="0" class="min-input"/>
            <span class="unit-text">(mm)</span>
          </el-col>
          <el-col :span="12">
            <el-input v-model="leftLine.color" placeholder="格式: #000000" class="min-input"></el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="对齐方式">
          <el-radio-group
              :disabled="activeElement.align === undefined"
              v-model="activeElement.align"
          >
            <el-radio-button :label="'left'">左对齐</el-radio-button>
            <el-radio-button :label="'center'">居中</el-radio-button>
            <el-radio-button :label="'right'">右对齐</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {getCodeTypeArray, getItemTypeArray} from '../../libs/props.js'

export default {
  data() {
    const activeElement = this.activeElement
    console.log('activeElement', activeElement)
    return {
      codeTypeArray: getCodeTypeArray(),
      itemTypeArray: getItemTypeArray()
    }
  },
  computed: {
    activeElement() {
      return this.$vptd.state.activeElement
    },
    viewType() {
      return this.activeElement.viewType
    },
    rect() {
      return this.activeElement.rect ?? {}
    },
    font() {
      return this.activeElement.font ?? {}
    },
    valueAlign() {
      return this.activeElement.valueAlign ?? {}
    },
    align() {
      return this.activeElement.align ?? {}
    },
    padding() {
      return this.activeElement.padding ?? {}
    },
    topLine() {
      return this.activeElement?.topLine ?? {}
    },
    rightLine() {
      return this.activeElement?.rightLine ?? {}
    },
    bottomLine() {
      return this.activeElement?.bottomLine ?? {}
    },
    leftLine() {
      return this.activeElement?.leftLine ?? {}
    },
    hiddenValue() {
      const hidden = this.activeElement.type != 2 && this.activeElement.type != 3 && this.activeElement.type != 4 && this.activeElement.type != 5
      return hidden
    },
    // 页面高度
    // height() {
    //   return this.$vptd.state.page.height
    // },
  },
  methods: {},
  watch: {

  },
}
</script>
<style lang="scss" scoped>
.mini-form {
  ::v-deep.el-form-item--mini.el-form-item {
    margin-bottom: 10px;
  }
}

.el-input-group__append, .el-input-group__prepend {
  padding: 0 10px !important;
}
</style>
